<template>
  <!-- 默认顶部 -->
  <div
    class="diy-user"
    :style="[
      `padding:${diyItem.style.mt}px  ${diyItem.style.mr}px  ${diyItem.style.mb}px  ${diyItem.style.ml}px `,
    ]"
  >
    <template v-if="diyItem.temp?.value == 1">
      <!-- 一 -->
      <div
        class=">div layout-1"
        :class="[`${diyItem.style.shade == 1 ? 'style-shade' : ''}`]"
        :style="[
          diyItem.style.bg_status == 1
            ? `background-image:url(${diyItem.style.bg_img}), linear-gradient(${diyItem.style.deg}deg, ${diyItem.style.bg} 0%, ${diyItem.style.bg2} 100%)`
            : '',
          `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
          `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
        ]"
      >
        <div class="diy-user-cell">
          <img :src="diyItem.data.default" class="diy-user-avater" />
          <div class="diy-user-name">
            <div>
              <span
                class="fw fz14"
                :style="{ color: diyItem.style.text_color }"
                >{{ diyItem.data.login_text }}</span
              >
              <span class="diy-member-label"
                ><i class="icon icon-huiyuan"></i>会员</span
              >
            </div>
            <div class="fz12" :style="{ color: diyItem.style.desc_color }">
              {{ diyItem.data.login_desc }}
            </div>
          </div>
          <div class="diy-user-tool" :style="[`color:${diyItem.style.color}`]">
            <div class="icon icon-erweima2"></div>
            <div class="icon icon-shezhi-3"></div>
          </div>
        </div>
        <div class="diy-user-wallet" v-if="diyItem.other.wallet.show == 1">
          <template
            v-for="(items, idx) in diyItem.other.wallet.data"
            :key="idx"
          >
            <div
              class="diy-user-wallet-item"
              :style="[`color:${diyItem.style.color}`]"
            >
              <div class="diy-user-wallet-count">0</div>
              <div class="diy-user-wallet-title">
                {{ items.title }}
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
    <template v-if="diyItem.temp?.value == 2">
      <!-- 2 -->
      <div class="diy-user-box layout-2">
        <div
          :class="[`${diyItem.style.shade == 1 ? 'style-shade' : ''}`]"
          :style="[
            diyItem.style.bg_status == 1
              ? `background-image:url(${diyItem.style.bg_img}), linear-gradient(${diyItem.style.deg}deg, ${diyItem.style.bg} 0%, ${diyItem.style.bg2} 100%)`
              : '',
            `padding:${diyItem.style.pt}px ${diyItem.style.pr}px 0 ${diyItem.style.pl}px `,
            `border-radius: 0 0 100% 100%/0 0 35px 35px;`,
          ]"
        >
          <div class="diy-user-cell">
            <img :src="diyItem.data.default" class="diy-user-avater" />
            <div class="diy-user-name">
              <div>
                <span
                  class="fw fz14"
                  :style="{ color: diyItem.style.text_color }"
                  >{{ diyItem.data.login_text }}</span
                >
                <span class="diy-member-label"
                  ><i class="icon icon-huiyuan"></i>会员</span
                >
              </div>
              <div class="fz12" :style="{ color: diyItem.style.desc_color }">
                {{ diyItem.data.login_desc }}
              </div>
            </div>
            <div
              class="diy-user-tool"
              :style="[`color:${diyItem.style.color}`]"
            >
              <div class="icon icon-erweima2"></div>
              <div class="icon icon-shezhi-3"></div>
            </div>
          </div>
        </div>
        <div
          :style="[
            `margin-top: 10px;`,
            `padding:0 ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
          ]"
        >
          <div
            class="diy-user-wallet"
            :class="[`${diyItem.style.shade == 1 ? 'style-shade' : ''}`]"
            v-if="diyItem.other.wallet.show == 1"
            :style="[
              `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
            ]"
          >
            <template
              v-for="(items, idx) in diyItem.other.wallet.data"
              :key="idx"
            >
              <div class="diy-user-wallet-item">
                <div class="diy-user-wallet-count">0</div>
                <div class="diy-user-wallet-title">
                  {{ items.title }}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </template>
    <template v-if="diyItem.temp?.value == 3">
      <!-- 三 -->
      <div class="diy-user-box layout-3">
        <div
          class="diy-user-box-bg"
          :style="[
            diyItem.style.bg_status == 1
              ? `background-image:url(${diyItem.style.bg_img}), linear-gradient(${diyItem.style.deg}deg, ${diyItem.style.bg} 0%, ${diyItem.style.bg2} 100%)`
              : '',
            `height: calc(100% - 30px - ${diyItem.style.pb}px)`,
          ]"
        ></div>
        <div
          :class="[`${diyItem.style.shade == 1 ? 'style-shade' : ''}`]"
          :style="[
            `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
          ]"
        >
          <div class="diy-user-box-main">
            <div class="diy-user-cell" :style="[`padding-bottom:90px`]">
              <img :src="diyItem.data.default" class="diy-user-avater" />
              <div class="diy-user-name">
                <div>
                  <span
                    class="fw fz14"
                    :style="{ color: diyItem.style.text_color }"
                    >{{ diyItem.data.login_text }}</span
                  >
                  <span class="diy-member-label"
                    ><i class="icon icon-huiyuan"></i>会员</span
                  >
                </div>
                <div class="fz12" :style="{ color: diyItem.style.desc_color }">
                  {{ diyItem.data.login_desc }}
                </div>
              </div>
              <div
                class="diy-user-tool"
                :style="[`color:${diyItem.style.color}`]"
              >
                <div class="icon icon-erweima2"></div>
                <div class="icon icon-shezhi-3"></div>
              </div>
            </div>
            <div
              class="diy-user-wallet"
              v-if="diyItem.other.wallet.show == 1"
              :style="[
                `top:66px`,
                `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
              ]"
            >
              <template
                v-for="(items, idx) in diyItem.other.wallet.data"
                :key="idx"
              >
                <div class="diy-user-wallet-item">
                  <div class="diy-user-wallet-count">0</div>
                  <div class="diy-user-wallet-title">
                    {{ items.title }}
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts">
export default {
  name: "storeDiyPreviewUser",
};
</script>
  <script  lang="ts" setup >
import { ref, getCurrentInstance, computed, StyleValue } from "vue";
import { diyUserDataType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem?: diyUserDataType;
    index: number;
  }>(),
  {
    diyItem: () => {
      return {
        style: {
          color: "#000000",
          text_color: "#000000",
          desc_color: "#777777",
          bg_status: 0,
          bg_img: "",
          bg: "#FFFFFF",
          bg2: "#FFFFFF",
          deg: 48,
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: {
          login_text: "授权登录",
          login_desc: "可以体验更多",
          default: "",
        },
        other: {
          wallet: {
            show: 0,
            data: [],
          },
        },
      };
    },
    index: 0,
  }
);

const styles = computed<StyleValue>(() => {
  return [
    props.diyItem.style.bg_status == 1
      ? `background-image:url(${props.diyItem.style.bg_img}), linear-gradient(${props.diyItem.style.deg}deg, ${props.diyItem.style.bg} 0%, ${props.diyItem.style.bg2} 100%)`
      : "",
    `padding:${props.diyItem.style.pt}px ${props.diyItem.style.pr}px ${props.diyItem.style.pb}px ${props.diyItem.style.pl}px `,
    `border-radius:${props.diyItem.style.t_radius}px ${props.diyItem.style.t_radius}px ${props.diyItem.style.b_radius}px ${props.diyItem.style.b_radius}px`,
  ];
});
</script>


<style scoped>
.diy-user {
  background-size: 100% 100%;
  /*background-color: #fff;*/
  position: relative;
  z-index: 1;
}
.diy-user-box {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-color: initial;
}
.diy-user-avater {
  width: 50px;
  height: 50px;
  border-radius: 2px;
  margin-right: 10px;
  border: 2px solid rgba(0, 0, 0, 0.2);
}
.diy-user-name {
  width: calc(100% - 60px - 70px);
  height: 50px;
  line-height: 25px;
}
.diy-member-label {
  font-size: 12px;
  background: linear-gradient(107deg, #7c7878 0%, #201a18 100%);
  color: #f7c774;
  line-height: 20px;
  height: 20px;
  border-radius: 2px;
  padding: 0 4px;
  display: inline-block;
  margin-left: 5px;
}
.diy-member-label .icon {
  font-size: 14px;
  margin-right: 2px;
}
.diy-user-tool {
  margin-left: 20px;
  display: flex;
  width: 50px;
  justify-content: space-between;
  text-align: center;
}
.diy-user-tool .icon {
  font-size: 18px;
}

.diy-user-wallet .diy-user-wallet-item {
  position: relative;
  flex: 1;
  text-align: center;
}
.diy-user-wallet .diy-user-wallet-item::after {
  position: absolute;
  content: "";
  height: 20px;
  top: calc(50% - 10px);
  width: 1px;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
  text-align: center;
}
.diy-user-wallet .diy-user-wallet-item:last-child::after {
  width: 0;
}
.diy-user-wallet-count {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 2px;
}
.diy-user-wallet-title {
  margin-top: 5px;
}

/* common */
.layout-1 .diy-user-cell,
.layout-2 .diy-user-cell,
.layout-3 .diy-user-cell {
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 56px;
}
/* 1 */

.layout-1 .diy-user-wallet {
  display: flex;
  justify-content: space-around;
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 20px;
  height: 60px;
  align-items: center;
}

/* 2 */
.layout-2 .diy-user-cell {
  padding-bottom: 20px;
}
.layout-2 .diy-user-wallet {
  background: #fff;
  display: flex;
  justify-content: space-around;
  height: 60px;
  padding: 10px 0;
  align-items: center;
}

/* 3 */
.layout-3.diy-user-box {
  position: relative;
}
.layout-3.diy-user-box .diy-user-box-bg {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-color: initial;
  position: absolute;
  width: 100%;
}
.layout-3.diy-user-box .diy-user-box-main {
  position: relative;
}
.layout-3.diy-user-box .diy-user-box-main .diy-user-wallet {
  position: absolute;
  background: #fff;
  height: 60px;
  padding: 10px 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>